<template>
<div>
<table>
  <tr v-for="i in list" :key="i">
    <td><van-button @click="get_id(i.id)">{{i.name}}</van-button></td>
  </tr>
</table>
  <div v-show="show_xiaoshuo">
    <table>
      <tr v-for="i in dict" :key="i">
        <td>{{i.name}}</td>
        <van-button @click="update_state(i.id,2)">通过</van-button>
        <van-button @click="update_state(i.id,3)">不通过</van-button>
      </tr>
    </table>
  </div>
  <div v-show="show_gift">
    <table>
      <tr v-for="i in dicts" :key="i">
        <td>{{i.name}}</td>
        <td>{{i.ntegral}}</td>
        <td><van-button @click="update_innelese(i.id)">兑换</van-button></td>
      </tr>
    </table>
  </div>

  <div id="show_one" style="width: 500px;height: 500px" v-show="show_xianxingtu">

  </div>
</div>
</template>

<script>
import * as echarts from "echarts";
import {reactive} from 'vue'
export default {
name: "nobe_list",
  setup() {
    let customerlist = reactive({'data': []})
    // var userid=localStorage.getItem('userid')
    var socket = new WebSocket("ws:127.0.0.1:8000/webs/");

    socket.onopen = function () {
      console.log('成功');//成功连接上Websocket
    };
    // 获取数据
    socket.onmessage = function (e) {
      customerlist.data = JSON.parse(e.data)
      console.log(customerlist.data )
      console.log('测试')
      if (customerlist.data[0].userid==localStorage.getItem('userid')){
        alert(customerlist.data[0].msg)
      }
      this.num_list=customerlist.data[0].num_list
      this.add_list=customerlist.data[0].add_list
      if (customerlist.data[0].num_list){
        var show_one = document.getElementById('show_one');
        var myChart = echarts.init(show_one);
        var option;
        option = {
          xAxis: {
            type: 'category',
            data: this.add_list
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.num_list,
              type: 'bar'
            }
          ]
        };

        option && myChart.setOption(option);
      }
    };

    socket.onclose = function () {
      console.log('关闭连接');
      socket.close(); //关闭TCP连接
    };
    //连接发生错误的回调方法
    socket.onerror = function () {
      console.log("WebSocket连接发生错误");
    }

    return {
      customerlist,
      socket
    }
  },
  data(){
  return{
    list:[],
    show_xiaoshuo:false,
    dict:[],
    show_gift:false,
    dicts:[],
    num_list: [],
    add_list: [],
    show_xianxingtu:true

  }
  },
  mounted() {
  this.get_role()
    this.get_gift()
    // 调用定时任务
    if (localStorage.getItem('state')==1){
      this.myaxios('http://localhost:8000/testaps', 'get', {'id': localStorage.getItem('userid')})
      .then(res=>{
        console.log(res)
      })
    }

  },
  methods:{
    // 实例化图形
    get_gift() {
      this.myaxios('http://localhost:8000/get_zhuzhuangtu', 'get', {'userid': localStorage.getItem('userid')})
          .then(res => {
            console.log(res)
            this.num_list = res.data.num_list
            this.add_list = res.data.add_list
          })
    },
  // 兑换积分
    update_innelese(id){
      console.log(id)
      this.myaxios('http://localhost:8000/update_gift/','post',{'pid':id,'userid':localStorage.getItem('userid')})
          .then(res=>{
            console.log(res)
            alert(res.data.msg)

          })
    },
    update_state(id,pid){
      this.myaxios('http://localhost:8000/update_inneroal','get',{'id':id,'pid':pid})
          .then(res=>{
            console.log(res)

          })
    },
    get_id(id){
      console.log(id)
      if (id==3){
        this.show_xiaoshuo=true
        this.show_xianxingtu=false
        this.get_xiaoshuo()
      }
      if (id==2){
        this.show_gift=true
        this.show_xianxingtu=false
        this.get_lipin()
      }
    },
  get_role(){
    this.myaxios('http://localhost:8000/get_nobe','get',{'userid':localStorage.getItem('userid')})
    .then(res=>{
      console.log(res)
      this.list=res.data.data
    })
  },
    get_xiaoshuo(){
      this.myaxios('http://localhost:8000/get_inneroal','get',{})
          .then(res=>{
            console.log(res)
            this.dict=res.data.res
          })
    },
    // 获取礼品
    get_lipin(){
      this.myaxios('http://localhost:8000/get_gift','get',{})
          .then(res=>{
            console.log(res)
            this.dicts=res.data.data
          })
    },
  }
}
</script>

<style scoped>

</style>
